<template>
    <div class="all" :style="{marginBottom: marginButton}">
      <div class="time">
        <div class="page" :style="{height: firstWeekDom}">
          <div style="display: inline-block;color: #d3d3d3;transform: scale(1,2)"> {{timeMonth}}月 </div>
        </div>
        <div v-for="(index, key) in startTime" class="module" ref="timeModule">
          <p>{{index}}</p>
          <div class= "thread">
            <div></div>
            <div></div>
          </div>
          <p>{{endTime[key]}}</p>
        </div>
      </div>
      <div class="center">
        <div class="week" v-for="(index, key) in week" ref="weekDom">
          <div>
            <div :style="{height: weekHeight}">
              <p v-if="pageDayData[key]">{{pageDayData[key]}}号</p>
            </div>
            <p ref="weekHeight">{{index}}</p>
          </div>
          <div class="meeting" v-for="(number, key) in 9" :style="{height: makeMeetingHight}">
            <div>1</div>
            <div>2</div>
          </div>
        </div>
      </div>
      <div class="bottomModular" ref="bottomModular">
        <div @click="backPage">上一页</div>
        <div @click="nextPage">下一页</div>
      </div>
    </div>
</template>
<style lang="less" scoped>
  .all{
    display: flex;
    background-color: #fff;
    width: 100%;
  }
  .time{
    display: inline-block;
    width: 15%;
    text-align: center;
    font-size: 0.8rem;
  }
  .module{
    padding: 0.5rem 0;
  }
  .thread{
    height: 0.5rem;
    display: flex;
    justify-content: center;
    div:first-child{
      border-right: 1px solid #ccc;
    }
    div:last-child{
      border-left: 1px solid #ccc;
    }
  }
  .center{
    display: inline-block;
    width: 85%;
    display: flex;
    font-size: 0.7rem;
    justify-content: space-around;
  }
  .week{
    padding-top: 0.5rem;
  }
  .page{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.5rem;
    div{
      width: 50%;
    }
  }
  .meeting{
    text-align: center;
  }
  .bottomModular{
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    width: 100%;
    background: #6DB1FF;
    text-align: center;
    color: #fff;
    display: flex;
    div{
      width: 50%;
      height: 100%;
      padding: 0.8rem 0;
      &:first-child{
        background-color: #fff;
        color: #000;
      }
    }
  }
</style>
<script>
  import {showTime} from '../../filters/showTime'
  export default{
    data(){
      return {
        startTime: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
        endTime: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
        week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        firstWeekDom: 0,
        weekHeight: 0,
        makeMeetingHight: 0,
        marginButton: 0,
        dayTimeWeek: [],
        timeWeek: '',
        timeYear: '',
        timeMonth: '',
        TodayTime: '',
        monthInitial: [],
        yesrData: {},
        pageDayData: [],
        newWhatWeek: 0
      }
    },
    created () {
      this.allTime()
    },
    methods: {
      allTime () {
        let time = new Date()
        let timeStamp = time.getTime()  //  获取时间戳
        this.timeYear = Number(String(time).substring(11, 15)) // 获取现在年份
        this.timeMonth = this.Month(time.getMonth())  // 知道当前月份
        this.timeWeek = time.getDay()  // 知道当前星期几
        this.TodayTime = Number(String(time).substring(8, 10))   // 知道当前几号
        // 知道每个月的第一天星期几
        for (let i = 1; i < 13; i++) {
          let k = this.getWeek(this.timeYear, i)
          this.monthInitial.push(k)
        }
        this.DayNumber(this.timeYear, this.timeMonth, this.timeWeek, this.TodayTime, this.monthInitial)
        this.whatWeek(this.timeMonth, this.TodayTime)
        this.Rendering(this.timeMonth, this.newWhatWeek)
        console.log('获取现在年份', this.timeYear, '知道当前月份', this.timeMonth, '知道当前星期几', this.timeWeek, '知道当前几号', this.TodayTime,
          '知道今年第一天星期几', this.monthInitial, '当前是这个月的第几周', this.newWhatWeek)
        console.log('yesrData', this.yesrData)
      },
      // 当前第几周
      whatWeek (timeMonth, TodayTime) {
        for (let i = 0; i < this.yesrData[timeMonth].length; i++) {
          if (this.yesrData[timeMonth][i].includes(TodayTime)) {
            this.newWhatWeek = i
            break
          }
        }
      },
      // 月份处理
      Month (val) {
        if (val === 0) {
          val = 10
          return Number(val)
        } else {
          val = val + 1
          return Number(val)
        }
      },
      // 获取一年的格式化数据
      DayNumber (timeYear, timeMonth, timeWeek, TodayTime, monthInitial) {
        let integer = /^[-+]?\d*$/
        for (let i = 1; i < 13; i++) {
          if ([1,3,5,7,8,10,12].includes(i)) {
            let dayLength = 31
            this.HandleTime(i, dayLength, this.monthInitial[i - 1])
          } else if ([4, 6, 9, 11].includes(i)) {
            let dayLength = 30
            this.HandleTime(i, dayLength, this.monthInitial[i - 1])
          } else if (i === 2) {
            if (integer.test(timeYear / 400)) {
              let dayLength = 28
              this.HandleTime(i, dayLength, this.monthInitial[i - 1])
            } else {
              let dayLength = 29
              this.HandleTime(i, dayLength, this.monthInitial[i - 1])
            }
          }
        }
      },
      // 获取一个月的完整数据
      HandleTime (month, dayNumber, monthInitial) {
        let week = []
        this.yesrData[month] = []
        let dataPosition = 0
        for (let i = 1; i < (dayNumber + 1); i++) {
          dataPosition = monthInitial + i - 1
          week[dataPosition] = i
        }
        for (let p = 0; p < Math.abs(week.length / 7); p++) {
          let frequency = p * 7
          this.yesrData[month].push(week.slice(frequency, frequency + 7))
        }
      },
      // 返回今年第一天星期几
      getWeek (year,month){
        let d = new Date()
        d.setYear(year)
        d.setMonth(month-1)
        d.setDate(1)
        return d.getDay()
      },
      // 渲染页面
      Rendering(timeMonth, newWhatWeek) {
        this.pageDayData = this.yesrData[timeMonth][newWhatWeek]
        console.log('this.pageDayData', this.pageDayData)
      },
      // 下一页
      nextPage () {
        this.newWhatWeek = this.newWhatWeek + 1
        if (this.yesrData[this.timeMonth][this.newWhatWeek]) {
          this.Rendering(this.timeMonth, this.newWhatWeek)
        } else {
          this.newWhatWeek = 0
          this.timeMonth = this.timeMonth + 1
          this.Rendering(this.timeMonth, this.newWhatWeek)
        }
      },
      // 上一页
      backPage () {
        this.newWhatWeek = this.newWhatWeek - 1
        if (this.yesrData[this.timeMonth][this.newWhatWeek]) {
          this.Rendering(this.timeMonth, this.newWhatWeek)
        } else {
          this.timeMonth = this.timeMonth - 1
          this.newWhatWeek = this.yesrData[this.timeMonth].length - 1
          this.Rendering(this.timeMonth, this.newWhatWeek)
        }
      }
    },
    mounted () {
      this.firstWeekDom = this.$refs.weekDom[0].firstChild.clientHeight + 'px'
      this.makeMeetingHight = this.$refs.timeModule[0].clientHeight + 'px'
      this.marginButton = this.$refs.bottomModular.clientHeight + 'px'
      this.weekHeight = this.$refs.weekHeight[0].clientHeight + 'px'
      console.log(this.weekHeight, 'this.weekHeight')
    },
    components: {
      //'other-component':OtherComponent,
      //HeaderComponent,
    }
  }
</script>
